<script setup lang="ts">
import {computed, onMounted, onUnmounted, ref, unref, watch} from "vue";
import {themeConfig} from "@/storage";
import {ArrowLeft, Lock, Switch} from "@element-plus/icons-vue";
import {defaultThemeConfig} from "@/storage/defaults";
import {ElMessage} from "element-plus";
import {Terminal} from "@xterm/xterm";
import {FitAddon} from "@xterm/addon-fit";
import {useDebounceFn, useEventListener} from "@vueuse/core";
import {useRouter} from "vue-router";

const router = useRouter()

const termRef = ref()
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

const theme = computed(() => themeConfig.value.isTerminalDark ? themeConfig.value.termThemeDark : themeConfig.value.termTheme)

// canvas背景全屏
const fitAddon = new FitAddon()
const term = new Terminal({
  // lineHeight: 1.2,
  fontSize: themeConfig.value.termFontSize || 14,
  fontFamily: "Consolas, Monaco, Menlo, 'Courier New', monospace",
  theme: theme.value,
  // 光标闪烁
  cursorBlink: true,
  cursorStyle: 'underline',
  scrollback: 50,
  // tabStopWidth: 4,
})


const onReset = () => {
  themeConfig.value = defaultThemeConfig()
  ElMessage.success('重置成功')
}

// 初始化Terminal
const initTerm = () => {
  term.open(termRef.value)
  term.loadAddon(fitAddon)
  fitAddon.fit()
  term.write(`Welcome to UOS Server 20 Activate the web console with: systemctl enable --now cockpit.socket`)
}


watch(() => theme.value, () => {
  term.options.theme = JSON.parse(JSON.stringify(unref(theme)))
}, {deep: true})

/**
 * 重置窗口
 */
const onTermResize = useDebounceFn(() => {
  fitAddon.fit()
}, 300)

const onTermChange = () => {
  term.options.fontSize = themeConfig.value.termFontSize || 14
}

// 监听窗口比变化
const cleanup = useEventListener(window, 'resize', onTermResize)

const onBack = () => {
  router.back()
}

onMounted(() => {
  initTerm()
})

onUnmounted(() => {
  cleanup()
  term.dispose()
})
</script>
<template>
  <div class="flex flex-column h100 pa5">
    <div class="flex align-center">
      <el-button plain :icon="ArrowLeft" @click="onBack()">返回</el-button>
      <el-button plain @click="onReset" :icon="Lock">重置终端主题</el-button>
      <el-button
        plain
        :icon="Switch"
        @click="themeConfig.isTerminalDark = !themeConfig.isTerminalDark">
        切换终端{{ themeConfig.isTerminalDark ? '亮色' : '暗色' }}
      </el-button>
    </div>
    <el-scrollbar class="flex-grow-1">
      <div class="flex">
        <ul class="pa5 term-theme" v-if="themeConfig.isTerminalDark">
          <li class="mb5"><h1>暗色主题</h1></li>
          <li v-for="(v, k, index) in themeConfig.termThemeDark" :key="index" class="term-theme-item">
            <span>{{ k }}：</span>
            <el-color-picker v-model="themeConfig.termThemeDark[k]" show-alpha :predefine="predefineColors"/>
          </li>
        </ul>
        <ul class="pa5 term-theme" v-else>
          <li class="mb5"><h1>浅色主题</h1></li>
          <li v-for="(v, k, index) in themeConfig.termTheme" :key="index" class="term-theme-item">
            <span>{{ k }}：</span>
            <el-color-picker v-model="themeConfig.termTheme[k]" show-alpha :predefine="predefineColors"/>
          </li>
        </ul>
        <div class="flex-grow-1">
          <ul class="pa5">
            <li>字体大小:
              <el-input-number v-model="themeConfig.termFontSize" @change="onTermChange"/>
            </li>
          </ul>
          <div ref="termRef" class="term"></div>
        </div>

      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.term-theme {
  width: 200px;
  flex-shrink: 0;
}

.term-theme .term-theme-item {
  padding: 0 5px;
}

.term {
  flex-grow: 1;
}
</style>
